<!-- 公共文件 start -->
@extends('admin.public.base')
<!-- 公共文件 end -->
<style>
    .image-upload {
        display: inline-block;
        width: 100px !important;
        height: 100px;
        cursor: pointer;
        border: 1px dotted #ccc;
        background-size: 100% 100%;
        background-image: url(/static/image/upload.png);
        margin-right: 10px;
    }
    .image-upload button,.identity-z button,.identity-f button {
        width: 100px;
        height: 100px;
        position: relative;
        top: 0px;
        opacity: 1;
        cursor: pointer;
    }
    .x-admin-sm .image-upload .layui-btn:hover{
        opacity: 0;
    }
    .form-container {
        display: flex;
    }
    .form-left {
        width: 35%;
    }
    .form-right {
        width: 65%;
    }
    #LAY_layedit_1 img {
        width: 100px !important;
    }
    .goods_img_ele {
        width: 100px;
        height: 100px;
        margin-right: 10px;
        display: inline-block;
        background-color: rebeccapurple;
    }
    .goods_img {
        width: 100px;
        height: 100px;
        display: inline-block;
    }
    .delete {
        position: absolute;
        top: 0;
        width: 100px;
        height: 100px;
        /*opacity: 0.8;*/
        background:url(/static/image/delete.png) no-repeat center;
        background-size: 35% 35%;
        /*background-color: #0000000;*/
    }
</style>
@section('content')
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            <div class="form-container">
                <div class="form-left">
                    <div class="layui-form-item">
                        <label for="cate_id" class="layui-form-label"><span class="x-red">*</span>分类</label>
                        <div class="layui-input-inline">
                            <select id="cate_id" name="cate_id" class="valid">
                                @foreach($list as $item)
                                    @if($info['cate_id'] == $item['id'])
                                        <option value="{{$item['id']}}" selected>{{$item['cate_name']}}</option>
                                    @else
                                        <option value="{{$item['id']}}">{{$item['cate_name']}}</option>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="goods_sn" class="layui-form-label">
                            <span class="x-red">*</span>编号</label>
                        <div class="layui-input-inline">
                            <input type="text" id="goods_sn" name="goods_sn" required="" lay-verify="required" autocomplete="off" class="layui-input" value="{{$info['goods_sn']}}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="goods_name" class="layui-form-label">
                            <span class="x-red">*</span>名称</label>
                        <div class="layui-input-inline">
                            <input type="text" id="goods_name" name="goods_name" required="" lay-verify="required" autocomplete="off" class="layui-input" value="{{$info['goods_name']}}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="x-red">*</span>类型</label>
                        <div class="layui-input-block">
                            <input type="radio" name="goods_type" value="1" title="普通" @if($info['goods_type'] == 1) checked @endif>
                            <input type="radio" name="goods_type" value="2" title="精品" @if($info['goods_type'] == 2) checked @endif>
                            <input type="radio" name="goods_type" value="3" title="特选" @if($info['goods_type'] == 3) checked @endif>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="x-red">*</span>固定价格</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="fixed_price" lay-skin="switch" lay-text="是|否" @if($info['fixed_price'] == 1) checked @endif>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="x-red">*</span>促销</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="promotion" lay-skin="switch" lay-text="是|否" @if($info['promotion'] == 1) checked @endif>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="x-red">*</span>上架</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="status" lay-skin="switch" lay-text="是|否" @if($info['status'] == 1) checked @endif>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="goods_price" class="layui-form-label">
                            <span class="x-red">*</span>价格</label>
                        <div class="layui-input-inline">
                            <input type="text" id="goods_price" name="goods_price" required="" lay-verify="required" autocomplete="off" class="layui-input" value="{{$info['goods_price']}}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="goods_weight_j" class="layui-form-label">
                            <span class="x-red">*</span>净重</label>
                        <div class="layui-input-inline">
                            <input type="text" id="goods_weight_j" name="goods_weight_j" required="" lay-verify="required" autocomplete="off" class="layui-input" value="{{$info['goods_weight_j']}}" step="0.001" oninput="checkWeight(this)">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="goods_weight_m" class="layui-form-label">
                            <span class="x-red">*</span>毛重</label>
                        <div class="layui-input-inline">
                            <input type="text" id="goods_weight_m" name="goods_weight_m" required="" lay-verify="required" autocomplete="off" class="layui-input" value="{{$info['goods_weight_m']}}" step="0.001" oninput="checkWeight(this)">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="mini_quantity" class="layui-form-label">
                            <span class="x-red">*</span>起订量</label>
                        <div class="layui-input-inline">
                            <input type="text" id="mini_quantity" name="mini_quantity" required="" lay-verify="required" autocomplete="off" class="layui-input" value="{{$info['mini_quantity']}}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="goods_specification" class="layui-form-label">
                            <span class="x-red">*</span>规格</label>
                        <div class="layui-input-inline">
                            <input type="text" id="goods_specification" name="goods_specification" required="" lay-verify="required" autocomplete="off" class="layui-input" value="{{$info['goods_specification']}}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="goods_unit" class="layui-form-label">
                            <span class="x-red">*</span>单位</label>
                        <div class="layui-input-inline">
                            <input type="text" id="goods_unit" name="goods_unit" required="" lay-verify="required" autocomplete="off" class="layui-input" value="{{$info['goods_unit']}}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="goods_img" class="layui-form-label">
                            <span class="x-red">*</span>图片</label>
                        <div class="layui-input-inline upload" style="display: flex;">
                            @if(!empty($info['goods_img_list']))
                                @foreach($info['goods_img_list'] as $v)
                                    <div class="goods_img_ele">
                                        <img class="goods_img" src="{{$v}}"/>
                                        <div class="delete"></div>
                                    </div>
                                @endforeach
                            @else
                                <!-- 如果 goods_img_list 为空，显示默认占位符 -->
                                <div class="goods_img_ele placeholder">
                                    <div class="placeholder-text">暂无图片</div>
                                </div>
                            @endif
                            <div class="image-upload identity-z">
                                <button type="button" class="layui-btn" id="goods_img" style="width: 100px;height: 100px;top: 0;opacity: 0">
                                    <i class="layui-icon">&#xe67c;</i>上传图片
                                </button>
                            </div>
                            <input type="hidden" name="goods_img" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"></label>
                        <input type="hidden" name="id" value="{{$info['id']}}"></input>
                        <button class="layui-btn" lay-filter="add" lay-submit="">增加</button>
                    </div>
                </div>
                <div class="form-right">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="x-red">*</span>详情</label>
                        <div class="layui-input-block">
                            <textarea id="goods_detail" name="goods_detail" style="display: none;">{{$info['goods_detail']}}</textarea>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    // 重量输入检查函数
    function checkWeight(input) {
        // 只允许输入数字和一个小数点
        input.value = input.value.replace(/[^\d.]/g, '');
        // 确保只有一个小数点
        if(input.value.split('.').length > 2) {
            input.value = input.value.slice(0, input.value.lastIndexOf('.'));
        }
        // 确保小数点后最多三位
        if(input.value.indexOf('.') > -1) {
            var decimalPart = input.value.split('.')[1];
            if(decimalPart && decimalPart.length > 3) {
                input.value = input.value.slice(0, input.value.indexOf('.') + 4);
            }
        }
    }
    layui.use(['form', 'layer', 'layedit'],
        function() {
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer;

            var layedit = layui.layedit;
            layedit.set({
                uploadImage: {
                    url: '/admin/index/layui/uploadImage', //接口url
                    type: 'post' //默认post
                }
            });
            goods_detail = layedit.build('goods_detail',{
                height: 520, //设置编辑器高度
            });

            // 上传分类图片
            layui.use('upload', function(){
                var upload = layui.upload;
                var uploadInst = upload.render({
                    elem: '#goods_img',  // 绑定元素
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                    },
                    url: '/admin/index/imageUpload', // 上传接口
                    done: function(res){
                        //上传完毕回调
                        var html = '<div class="goods_img_ele">';
                        var img  = '<img class="goods_img" src="' +  res.data.image + '"/>';
                        html = html + img + '<div class="delete"></div></div>';
                        $(".image-upload").before(html);
                    },
                    error: function(){
                        //请求异常回调
                    }
                });
            });

            // 点击删除图标
            $(".upload").on('click','.delete',function () {
                var that = this;
                layer.confirm('确定要删除吗？', {icon: 3, title:'提示'}, function(index){
                    $(that).parent().remove();
                    layer.close(index);
                });
            });

            //监听提交
            form.on('submit(add)',
                function(data) {
                    var content = '';
                    $(".goods_img").each(function(index){
                        var src = $(this)[0].src;
                        if(index == 0){
                            content = content + src;
                        }else{
                            content = content + ',' + src;
                        }
                    });
                    data.field.goods_img = content;
                    data.field.goods_detail = layedit.getContent(goods_detail);
                    if (data.field.goods_img == '') {
                        layer.msg('请上传商品图片',{icon:7,time:2000});
                        return false;
                    }
                    if (data.field.goods_detail == '') {
                        layer.msg('请上传商品详情',{icon:7,time:2000});
                        return false;
                    }
                    $.ajax({
                        type: 'POST',
                        url: '/admin/goods/goodsEdit',
                        data: data.field,
                        dataType: 'json',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                        },
                        success: function (data) {
                            if (data.code == 1) {
                                layer.alert("编辑成功", {
                                        icon: 6,
                                        closeBtn: false
                                    },
                                    function() {
                                        //关闭当前frame
                                        xadmin.close();
                                        // 可以对父窗口进行刷新
                                        xadmin.father_reload();
                                    });
                            } else {
                                layer.alert(data.msg)
                            }
                        },
                        error: function (xhr, type) {
                            alert('Ajax error!')
                        }
                    });
                    return false;
                });
            });
</script>

@endsection
